<template>
  <div class="hot-search-container">
    <PageHeader height="50vh" :customTexts="['热搜 | 技术圈热点聚焦', '始于代码，不止于代码。']" :backgroundChangeInterval="30000"
      :imageSourcesConfig="['moe']" />
    <div class="main-content">
      <div class="hot-search">
        <!-- 搜索框部分 -->
        <el-card class="search-box">
          <div class="search-input">
            <input v-model="searchText" :placeholder="getCurrentEngine.isSiteSearch ? '搜索文章、用户、标签、分类、说说...' : `在 ${getCurrentEngine.label} 中搜索...`" @keyup.enter="handleSearch">
            <button class="search-btn" @click="handleSearch">
              <i class="fas fa-search"></i>
            </button>
          </div>
          <div class="search-engines">
            <button v-for="engine in searchEngines" :key="engine.name"
              :class="['engine-btn', { active: currentEngine === engine.name }]" @click="currentEngine = engine.name">
              <i v-if="engine.useFont" :class="engine.icon"></i>
              <svg-icon v-else :icon-class="engine.icon"></svg-icon>
              {{ engine.label }}
            </button>
          </div>
        </el-card>

        <!-- 热搜列表部分 -->
        <el-card class="hot-lists">
          <div class="hot-tabs">
            <button v-for="tab in hotTabs" :key="tab.type" :class="['tab-btn', { active: currentTab === tab.type }]"
              @click="currentTab = tab.type">
              <i :class="tab.icon"></i>
              {{ tab.label }}
            </button>
          </div>

          <div class="hot-content">
            <!-- 站内搜索内容 -->
            <div v-if="currentTab === 'site'" class="site-search-content">
              <!-- 搜索类型选择 -->
              <div class="search-type-tabs">
                <button v-for="searchType in siteSearchData.searchTypes" :key="searchType.type"
                  :class="['search-type-btn', { active: siteSearchData.currentSearchType === searchType.type }]"
                  @click="switchSearchType(searchType.type)">
                  <i :class="searchType.icon"></i>
                  {{ searchType.label }}
                </button>
              </div>

              <!-- 搜索结果 -->
              <div v-if="siteSearchData.searchKeyword" class="search-results-container" v-loading="siteSearchData.searchLoading">
                <!-- 综合搜索结果 -->
                <div v-if="siteSearchData.currentSearchType === 'all' && siteSearchData.searchResults.articles">
                  <div class="search-section" v-if="getSearchResultsForType('articles').length > 0">
                    <h3 class="section-title">
                      <i class="fas fa-file-alt"></i>
                      文章 ({{ getSearchResultsForType('articles').length }})
                    </h3>
                    <div class="search-items">
                      <div v-for="article in getSearchResultsForType('articles')" :key="article.id"
                           class="search-item article-item" @click="goToArticle(article.id)">
                        <div class="item-content">
                          <h4 class="item-title">{{ article.title }}</h4>
                          <p class="item-summary">{{ article.summary || '暂无摘要' }}</p>
                          <div class="item-meta">
                            <span><i class="fas fa-eye"></i> {{ article.quantity || 0 }}</span>
                            <span><i class="fas fa-calendar"></i> {{ formatDate(article.createTime) }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="search-section" v-if="getSearchResultsForType('users').length > 0">
                    <h3 class="section-title">
                      <i class="fas fa-user"></i>
                      用户 ({{ getSearchResultsForType('users').length }})
                    </h3>
                    <div class="search-items">
                      <div v-for="user in getSearchResultsForType('users')" :key="user.id"
                           class="search-item user-item" @click="goToUser(user.id)">
                        <img :src="user.avatar || '/default-avatar.png'" :alt="user.nickname" class="user-avatar">
                        <div class="item-content">
                          <h4 class="item-title">{{ user.nickname }}</h4>
                          <p class="item-summary">{{ user.intro || '这个用户很懒，什么都没有留下' }}</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="search-section" v-if="getSearchResultsForType('tags').length > 0">
                    <h3 class="section-title">
                      <i class="fas fa-tag"></i>
                      标签 ({{ getSearchResultsForType('tags').length }})
                    </h3>
                    <div class="search-items">
                      <div v-for="tag in getSearchResultsForType('tags')" :key="tag.id"
                           class="search-item tag-item" @click="goToTag(tag.id)">
                        <span class="tag-name">{{ tag.name }}</span>
                      </div>
                    </div>
                  </div>

                  <div class="search-section" v-if="getSearchResultsForType('categories').length > 0">
                    <h3 class="section-title">
                      <i class="fas fa-folder"></i>
                      分类 ({{ getSearchResultsForType('categories').length }})
                    </h3>
                    <div class="search-items">
                      <div v-for="category in getSearchResultsForType('categories')" :key="category.id"
                           class="search-item category-item" @click="goToCategory(category.id)">
                        <span class="category-name">{{ category.name }}</span>
                      </div>
                    </div>
                  </div>

                  <div class="search-section" v-if="getSearchResultsForType('moments').length > 0">
                    <h3 class="section-title">
                      <i class="fas fa-comment"></i>
                      说说 ({{ getSearchResultsForType('moments').length }})
                    </h3>
                    <div class="search-items">
                      <div v-for="moment in getSearchResultsForType('moments')" :key="moment.id"
                           class="search-item moment-item" @click="goToMoment(moment.id)">
                        <div class="item-content">
                          <p class="item-summary">{{ stripHtmlTags(moment.content) }}</p>
                          <div class="item-meta">
                            <span><i class="fas fa-heart"></i> {{ moment.likeCount || 0 }}</span>
                            <span><i class="fas fa-calendar"></i> {{ formatDate(moment.createTime) }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 单独类型搜索结果 -->
                <div v-else-if="siteSearchData.currentSearchType !== 'all'">
                  <div class="single-type-results">
                    <!-- 搜索信息头部 -->
                    <div class="search-info-header">
                      <h3 class="search-title">
                        <i :class="getSearchTypeIcon(siteSearchData.currentSearchType)"></i>
                        {{ getSearchTypeLabel(siteSearchData.currentSearchType) }}搜索结果
                      </h3>
                      <p class="search-info">
                        搜索 "<span class="keyword">{{ siteSearchData.searchKeyword }}</span>"
                        共找到 <span class="total">{{ siteSearchData.searchTotal }}</span> 条结果
                      </p>
                    </div>

                    <!-- 文章搜索结果 -->
                    <div v-if="siteSearchData.currentSearchType === 'articles'" class="articles-results">
                      <div v-if="siteSearchData.searchResults.articles && siteSearchData.searchResults.articles.length > 0"
                           class="result-list">
                        <div v-for="article in siteSearchData.searchResults.articles" :key="article.id"
                             class="article-item" @click="goToArticle(article.id)">
                          <div class="article-cover" v-if="article.cover">
                            <img :src="article.cover" :alt="article.title" />
                          </div>
                          <div class="article-content">
                            <h4 class="article-title">{{ article.title }}</h4>
                            <p class="article-summary">{{ article.summary || '暂无摘要' }}</p>
                            <div class="article-meta">
                              <span class="meta-item">
                                <i class="fas fa-eye"></i>
                                {{ article.quantity || 0 }}
                              </span>
                              <span class="meta-item">
                                <i class="fas fa-calendar"></i>
                                {{ formatDate(article.createTime) }}
                              </span>
                              <span v-if="article.categoryName" class="meta-item">
                                <i class="fas fa-folder"></i>
                                {{ article.categoryName }}
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-else class="no-results">
                        <i class="fas fa-search"></i>
                        <p>未找到相关文章</p>
                      </div>
                    </div>

                    <!-- 用户搜索结果 -->
                    <div v-else-if="siteSearchData.currentSearchType === 'users'" class="users-results">
                      <div v-if="siteSearchData.searchResults.users && siteSearchData.searchResults.users.length > 0"
                           class="result-list">
                        <div v-for="user in siteSearchData.searchResults.users" :key="user.id"
                             class="user-item" @click="goToUser(user.id)">
                          <div class="user-avatar">
                            <img :src="user.avatar || '/default-avatar.png'" :alt="user.nickname" />
                          </div>
                          <div class="user-info">
                            <h4 class="user-nickname">{{ user.nickname }}</h4>
                            <p class="user-username">@{{ user.username }}</p>
                            <p class="user-intro">{{ user.intro || '这个用户很懒，什么都没有留下' }}</p>
                            <div class="user-meta">
                              <span class="meta-item">
                                <i class="fas fa-calendar"></i>
                                注册于 {{ formatDate(user.createTime) }}
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-else class="no-results">
                        <i class="fas fa-users"></i>
                        <p>未找到相关用户</p>
                      </div>
                    </div>

                    <!-- 标签搜索结果 -->
                    <div v-else-if="siteSearchData.currentSearchType === 'tags'" class="tags-results">
                      <div v-if="siteSearchData.searchResults.tags && siteSearchData.searchResults.tags.length > 0"
                           class="result-list">
                        <div v-for="tag in siteSearchData.searchResults.tags" :key="tag.id"
                             class="tag-item" @click="goToTag(tag.id)">
                          <div class="tag-icon">
                            <i class="fas fa-tag"></i>
                          </div>
                          <div class="tag-info">
                            <h4 class="tag-name">{{ tag.name }}</h4>
                            <p class="tag-description">{{ tag.description || '暂无描述' }}</p>
                            <div class="tag-meta">
                              <span class="meta-item">
                                <i class="fas fa-calendar"></i>
                                创建于 {{ formatDate(tag.createTime) }}
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-else class="no-results">
                        <i class="fas fa-tags"></i>
                        <p>未找到相关标签</p>
                      </div>
                    </div>

                    <!-- 分类搜索结果 -->
                    <div v-else-if="siteSearchData.currentSearchType === 'categories'" class="categories-results">
                      <div v-if="siteSearchData.searchResults.categories && siteSearchData.searchResults.categories.length > 0"
                           class="result-list">
                        <div v-for="category in siteSearchData.searchResults.categories" :key="category.id"
                             class="category-item" @click="goToCategory(category.id)">
                          <div class="category-icon">
                            <i class="fas fa-folder"></i>
                          </div>
                          <div class="category-info">
                            <h4 class="category-name">{{ category.name }}</h4>
                            <p class="category-description">{{ category.description || '暂无描述' }}</p>
                            <div class="category-meta">
                              <span class="meta-item">
                                <i class="fas fa-calendar"></i>
                                创建于 {{ formatDate(category.createTime) }}
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-else class="no-results">
                        <i class="fas fa-folder-open"></i>
                        <p>未找到相关分类</p>
                      </div>
                    </div>

                    <!-- 说说搜索结果 -->
                    <div v-else-if="siteSearchData.currentSearchType === 'moments'" class="moments-results">
                      <div v-if="siteSearchData.searchResults.moments && siteSearchData.searchResults.moments.length > 0"
                           class="result-list">
                        <div v-for="moment in siteSearchData.searchResults.moments" :key="moment.id"
                             class="moment-item" @click="goToMoment(moment.id)">
                          <div class="moment-content">
                            <p class="moment-text">{{ stripHtmlTags(moment.content) }}</p>
                            <!-- 移除图片显示，只显示文字内容 -->
                            <div class="moment-meta">
                              <span class="meta-item">
                                <i class="fas fa-calendar"></i>
                                {{ formatDate(moment.createTime) }}
                              </span>
                              <span class="meta-item" v-if="moment.location">
                                <i class="fas fa-map-marker-alt"></i>
                                {{ moment.location }}
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-else class="no-results">
                        <i class="fas fa-comment"></i>
                        <p>未找到相关说说</p>
                      </div>
                    </div>

                    <!-- 分页组件 -->
                    <div v-if="siteSearchData.searchTotal > 0" class="pagination-wrapper">
                      <el-pagination
                        @current-change="handlePageChange"
                        :current-page="siteSearchData.currentPage"
                        :page-size="siteSearchData.pageSize"
                        :total="siteSearchData.searchTotal"
                        layout="prev, pager, next, jumper"
                        background>
                      </el-pagination>
                    </div>
                  </div>
                </div>

                <!-- 无搜索结果 -->
                <div v-if="siteSearchData.searchTotal === 0 && !siteSearchData.searchLoading" class="no-results">
                  <i class="fas fa-search"></i>
                  <p>没有找到相关内容</p>
                  <p class="no-results-tip">试试其他关键词吧</p>
                </div>
              </div>

              <!-- 搜索提示 -->
              <div v-else class="search-placeholder">
                <i class="fas fa-search"></i>
                <p>请在上方搜索框中输入关键词进行站内搜索</p>
                <p class="search-tip">支持搜索文章、用户、标签、分类和说说</p>
              </div>
            </div>

            <!-- 原有热搜内容 -->
            <div v-else class="hot-grid" v-loading="loading">
              <div v-for="(item, index) in currentHotList" :key="index" class="hot-card"
                :class="[currentTab, { 'top-rank': index < 3 }]">
                <span class="rank" :class="getRankClass(index)">{{ index + 1 }}</span>
                <div class="card-content">
                  <div class="title-wrap">
                    <a href="javascript:void(0)" class="title" @click="handleHotItemClick(item)">{{ item.keyword }}</a>
                    <span class="hot-tag" v-if="item.tag">{{ item.tag }}</span>
                  </div>
                  <div class="card-footer">
                    <span class="hot-value" v-if="item.hotValue">
                      <i class="fas fa-fire"></i>
                      {{ formatHotValue(item.hotValue) }}
                    </span>
                    <span class="trend" v-if="item.trend">
                      <i :class="getTrendIcon(item.trend)"></i>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 添加链接跳转提示框 -->
      <mj-link-jump-prompt ref="linkJumpPrompt" />
    </div>
  </div>
</template>

<script>
import { getHotListApi, comprehensiveSearchApi, searchUsersApi, searchTagsApi, searchCategoriesApi, searchMomentsApi } from '@/api/hot-search'
import { searchArticlesApi } from '@/api/article'
import PageHeader from '@/components/PageHeader/index.vue'
export default {
  name: 'HotSearch',
  components: {
    PageHeader
  },
  data() {
    return {
      searchText: '',
      currentEngine: 'site',
      currentTab: 'site',
      loading: false,
      searchEngines: [
        { name: 'site', label: '站内搜索', icon: 'fas fa-home', url: '', isSiteSearch: true, useFont: true },
        { name: 'baidu', label: '百度', icon: 'baidu', url: 'https://www.baidu.com/s?wd=' },
        { name: 'google', label: '谷歌', icon: 'chrome', url: 'https://www.google.com/search?q=' },
        { name: 'bing', label: '必应', icon: 'bing', url: 'https://www.bing.com/search?q=' },
        { name: 'quark', label: '夸克', icon: 'quark', url: 'https://quark.sm.cn/s?q=' },
        { name: 'gitee', label: '码云', icon: 'gitee', url: 'https://search.gitee.com/?q=' },
        { name: 'github', label: 'GitHub', icon: 'github', url: 'https://github.com/search?q=' },
        { name: 'csdn', label: 'CSDN', icon: 'csdn', url: 'https://so.csdn.net/so/search/s.do?q=' },

      ],
      hotTabs: [
        { type: 'site', label: '站内搜索', icon: 'fas fa-home' },
        { type: 'weibo', label: '微博热搜', icon: 'fab fa-weibo' },
        { type: 'zhihu', label: '知乎热榜', icon: 'fab fa-zhihu' },
        { type: 'toutiao', label: '头条热榜', icon: 'fas fa-fire' },
        { type: 'baidu', label: '百度热搜', icon: 'fas fa-chart-line' },
        { type: 'csdn', label: 'CSDN热榜', icon: 'fas fa-code' }
      ],
      hotLists: {
        site: [],
        weibo: [],
        zhihu: [],
        toutiao: [],
        baidu: [],
        csdn: []
      },
      // 站内搜索相关数据
      siteSearchData: {
        searchTypes: [
          { type: 'all', label: '全部', icon: 'fas fa-search' },
          { type: 'articles', label: '文章', icon: 'fas fa-file-alt' },
          { type: 'users', label: '用户', icon: 'fas fa-user' },
          { type: 'tags', label: '标签', icon: 'fas fa-tag' },
          { type: 'categories', label: '分类', icon: 'fas fa-folder' },
          { type: 'moments', label: '说说', icon: 'fas fa-comment' }
        ],
        currentSearchType: 'all',
        searchResults: {},
        searchLoading: false,
        searchKeyword: '',
        searchTotal: 0,
        currentPage: 1,
        pageSize: 10,
        // 搜索结果缓存
        searchCache: {}
      }
    }
  },
  computed: {
    getCurrentEngine() {
      return this.searchEngines.find(engine => engine.name === this.currentEngine)
    },
    currentHotList() {
      return this.hotLists[this.currentTab] || []
    }
  },
  methods: {
    handleSearch() {
      if (!this.searchText.trim()) {
        this.$message.warning('请输入搜索内容')
        return
      }
      const engine = this.getCurrentEngine

      // 如果是站内搜索
      if (engine.isSiteSearch) {
        this.performSiteSearch(this.searchText.trim())
        return
      }

      // 外部搜索引擎
      window.open(engine.url + encodeURIComponent(this.searchText), '_blank')
    },

    // 执行站内搜索
    async performSiteSearch(keyword) {
      // 如果搜索关键词改变，清除缓存
      if (this.siteSearchData.searchKeyword !== keyword) {
        this.siteSearchData.searchCache = {}
      }

      this.siteSearchData.searchKeyword = keyword
      this.siteSearchData.searchLoading = true

      try {
        // 检查缓存
        const cacheKey = keyword
        if (this.siteSearchData.searchCache[cacheKey] && this.siteSearchData.currentSearchType === 'all') {
          // 使用缓存的综合搜索结果
          this.loadFromCache(cacheKey, 'all')
          this.currentTab = 'site'
          this.siteSearchData.searchLoading = false
          return
        }

        if (this.siteSearchData.currentSearchType === 'all') {
          // 综合搜索 - 一次性获取所有类型的搜索结果并缓存
          const res = await comprehensiveSearchApi({
            keyword,
            pageNum: this.siteSearchData.currentPage,
            pageSize: this.siteSearchData.pageSize
          })

          // 缓存搜索结果
          this.siteSearchData.searchCache[cacheKey] = {
            comprehensive: res.data,
            timestamp: Date.now()
          }

          this.siteSearchData.searchResults = res.data
          this.siteSearchData.searchTotal = this.calculateTotalResults(res.data)
        } else {
          // 单独搜索 - 检查是否有缓存的综合搜索结果
          if (this.siteSearchData.searchCache[cacheKey]) {
            this.loadFromCache(cacheKey, this.siteSearchData.currentSearchType)
          } else {
            // 没有缓存，执行单独搜索
            await this.performSpecificSearch(this.siteSearchData.currentSearchType)
          }
        }

        // 切换到站内搜索标签页
        this.currentTab = 'site'
      } catch (error) {
        this.$message.error('搜索失败，请稍后重试')
        console.error('站内搜索错误:', error)
      } finally {
        this.siteSearchData.searchLoading = false
      }
    },

    // 执行特定类型搜索
    async performSpecificSearch(type, params = null) {
      // 如果没有传递参数，使用默认参数
      if (!params) {
        params = {
          keyword: this.siteSearchData.searchKeyword,
          pageNum: this.siteSearchData.currentPage,
          pageSize: this.siteSearchData.pageSize
        }
      }

      let res

      switch (type) {
        case 'articles':
          res = await searchArticlesApi(params)
          this.siteSearchData.searchResults = {
            articles: res.data.records || res.data || []
          }
          break
        case 'users':
          res = await searchUsersApi(params)
          this.siteSearchData.searchResults = {
            users: res.data.records || res.data || []
          }
          break
        case 'tags':
          res = await searchTagsApi(params)
          this.siteSearchData.searchResults = {
            tags: res.data.records || res.data || []
          }
          break
        case 'categories':
          res = await searchCategoriesApi(params)
          this.siteSearchData.searchResults = {
            categories: res.data.records || res.data || []
          }
          break
        case 'moments':
          res = await searchMomentsApi(params)
          this.siteSearchData.searchResults = {
            moments: res.data.records || res.data || []
          }
          break
      }

      this.siteSearchData.searchTotal = res.data.total || 0
    },

    // 切换搜索类型
    switchSearchType(type) {
      this.siteSearchData.currentSearchType = type
      this.siteSearchData.currentPage = 1 // 重置页码

      if (this.siteSearchData.searchKeyword) {
        // 检查是否有缓存的搜索结果
        const cacheKey = this.siteSearchData.searchKeyword
        if (this.siteSearchData.searchCache[cacheKey]) {
          // 使用缓存的结果
          this.loadFromCache(cacheKey, type)
        } else {
          // 没有缓存，重新搜索
          this.performSiteSearch(this.siteSearchData.searchKeyword)
        }
      }
    },

    // 获取搜索类型图标
    getSearchTypeIcon(type) {
      const typeMap = {
        'articles': 'fas fa-file-alt',
        'users': 'fas fa-user',
        'tags': 'fas fa-tag',
        'categories': 'fas fa-folder',
        'moments': 'fas fa-comment'
      }
      return typeMap[type] || 'fas fa-search'
    },

    // 获取搜索类型标签
    getSearchTypeLabel(type) {
      const typeMap = {
        'articles': '文章',
        'users': '用户',
        'tags': '标签',
        'categories': '分类',
        'moments': '说说'
      }
      return typeMap[type] || '搜索'
    },

    // 处理分页变化
    handlePageChange(page) {
      this.siteSearchData.currentPage = page
      if (this.siteSearchData.searchKeyword) {
        if (this.siteSearchData.currentSearchType === 'all') {
          this.performSiteSearch(this.siteSearchData.searchKeyword)
        } else {
          this.performSpecificSearch(this.siteSearchData.currentSearchType, {
            keyword: this.siteSearchData.searchKeyword,
            pageNum: page,
            pageSize: this.siteSearchData.pageSize
          })
        }
      }
    },
    getRankClass(index) {
      if (index < 3) return `rank-${index + 1}`
      return ''
    },
    formatHotValue(value) {
      if (value >= 10000) {
        return (value / 10000).toFixed(1) + 'w'
      }
      return value
    },
    async fetchHotList(type) {
      // 如果是站内搜索标签页，不需要获取热搜数据
      if (type === 'site') {
        this.loading = false
        return
      }

      this.loading = true
      try {
        // 这里替换为实际的API调用
        const res = await getHotListApi(type)
        this.hotLists[type] = res.data.data
      } catch (error) {
        this.$message.error('获取热搜数据失败')
      } finally {
        this.loading = false
      }
    },
    handleHotItemClick(item) {
      if (item.url) {
        // 使用链接跳转提示框进行跳转，而不是直接打开
        if (this.$refs.linkJumpPrompt) {
          this.$refs.linkJumpPrompt.show(item.url);
        } else if (this.$linkJumpPrompt) {
          this.$linkJumpPrompt.show(item.url);
        } else {
          // 如果没有找到提示框组件，则降级为直接打开
          window.open(item.url, '_blank')
        }
      }
    },
    getTrendIcon(trend) {
      if (trend === '上升') return 'fas fa-arrow-up text-success'
      if (trend === '下降') return 'fas fa-arrow-down text-danger'
      return 'fas fa-minus text-warning'
    },

    // 导航到文章详情
    goToArticle(articleId) {
      this.$router.push(`/post/${articleId}`)
    },

    // 导航到标签页面
    goToTag(tagId) {
      this.$router.push(`/tags?tagId=${tagId}`)
    },

    // 导航到分类页面
    goToCategory(categoryId) {
      this.$router.push(`/categories?categoryId=${categoryId}`)
    },

    // 导航到用户主页
    goToUser(userId) {
      this.$router.push(`/user/${userId}`)
    },

    // 导航到说说详情
    goToMoment(momentId) {
      this.$router.push(`/moments/${momentId}`)
    },

    // 清理HTML标签，只保留纯文本
    stripHtmlTags(html) {
      if (!html) return ''
      // 创建一个临时div元素来解析HTML
      const tempDiv = document.createElement('div')
      tempDiv.innerHTML = html
      // 获取纯文本内容
      const text = tempDiv.textContent || tempDiv.innerText || ''
      // 限制文本长度，避免显示过长
      return text.length > 200 ? text.substring(0, 200) + '...' : text
    },

    // 获取指定类型的搜索结果
    getSearchResultsForType(type) {
      const results = this.siteSearchData.searchResults
      if (!results) return []

      switch (type) {
        case 'articles':
          return results.articles || []
        case 'users':
          return results.users?.records || results.users || []
        case 'tags':
          return results.tags?.records || results.tags || []
        case 'categories':
          return results.categories?.records || results.categories || []
        case 'moments':
          return results.moments?.records || results.moments || []
        default:
          return []
      }
    },

    // 从缓存加载搜索结果
    loadFromCache(cacheKey, searchType) {
      const cache = this.siteSearchData.searchCache[cacheKey]
      if (!cache) return

      const comprehensiveData = cache.comprehensive

      if (searchType === 'all') {
        // 加载综合搜索结果
        this.siteSearchData.searchResults = comprehensiveData
        this.siteSearchData.searchTotal = comprehensiveData.total || 0
      } else {
        // 加载特定类型的搜索结果
        const typeResults = this.getResultsFromComprehensive(comprehensiveData, searchType)
        this.siteSearchData.searchResults = { [searchType]: typeResults.data }
        this.siteSearchData.searchTotal = typeResults.total
      }
    },

    // 从综合搜索结果中提取特定类型的结果
    getResultsFromComprehensive(comprehensiveData, type) {
      switch (type) {
        case 'articles':
          return {
            data: comprehensiveData.articles || [],
            total: comprehensiveData.articles?.length || 0
          }
        case 'users':
          return {
            data: comprehensiveData.users?.records || comprehensiveData.users || [],
            total: comprehensiveData.users?.total || comprehensiveData.users?.length || 0
          }
        case 'tags':
          return {
            data: comprehensiveData.tags?.records || comprehensiveData.tags || [],
            total: comprehensiveData.tags?.total || comprehensiveData.tags?.length || 0
          }
        case 'categories':
          return {
            data: comprehensiveData.categories?.records || comprehensiveData.categories || [],
            total: comprehensiveData.categories?.total || comprehensiveData.categories?.length || 0
          }
        case 'moments':
          return {
            data: comprehensiveData.moments?.records || comprehensiveData.moments || [],
            total: comprehensiveData.moments?.total || comprehensiveData.moments?.length || 0
          }
        default:
          return { data: [], total: 0 }
      }
    },

    // 计算综合搜索结果的总数
    calculateTotalResults(comprehensiveData) {
      let total = 0

      // 文章数量
      if (comprehensiveData.articles) {
        total += comprehensiveData.articles.length
      }

      // 用户数量
      if (comprehensiveData.users) {
        total += comprehensiveData.users.records ? comprehensiveData.users.records.length : (comprehensiveData.users.length || 0)
      }

      // 标签数量
      if (comprehensiveData.tags) {
        total += comprehensiveData.tags.records ? comprehensiveData.tags.records.length : (comprehensiveData.tags.length || 0)
      }

      // 分类数量
      if (comprehensiveData.categories) {
        total += comprehensiveData.categories.records ? comprehensiveData.categories.records.length : (comprehensiveData.categories.length || 0)
      }

      // 说说数量
      if (comprehensiveData.moments) {
        total += comprehensiveData.moments.records ? comprehensiveData.moments.records.length : (comprehensiveData.moments.length || 0)
      }

      return total
    },

    // 格式化日期
    formatDate(date) {
      if (!date) return ''
      return new Date(date).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
      })
    }
  },
  watch: {
    currentTab: {
      immediate: true,
      handler(newTab) {
        this.fetchHotList(newTab)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.hot-search-container {
  min-height: 100vh;
}

.main-content {
  padding: $spacing-lg;
}

.hot-search {
  max-width: 1200px;
  margin: 0 auto;
}


.search-box {
  margin-bottom: $spacing-xl;
  padding: $spacing-lg;

  .search-input {
    position: relative;
    margin-bottom: $spacing-lg;

    input {
      width: 100%;
      padding: $spacing-md $spacing-md;
      padding-right: 60px;
      border-radius: $border-radius-md;
      border-color: var(--border-color);
      font-size: 1.1em;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      background-color: var(--card-bg);

      &:focus {
        outline: none;
        border-color: $primary;
        box-shadow: 0 0 0 4px rgba($primary, 0.1);
      }
    }

    .search-btn {
      position: absolute;
      right: $spacing-md;
      top: 50%;
      transform: translateY(-50%);
      background: $primary;
      border: none;
      color: var(--card-bg);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

      &:hover {
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 4px 12px rgba($primary, 0.3);
      }
    }
  }

  .search-engines {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-sm;

    .engine-btn {
      padding: $spacing-sm $spacing-lg;
      border: none;
      background: var(--hover-bg);
      color: var(--text-secondary);
      border-radius: $border-radius-md;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      gap: $spacing-sm;
      font-size: 0.95em;
      font-weight: 500;

      &.active {
        background: $primary;
        color: var(--text-primary);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba($primary, 0.2);
      }

      &:hover:not(.active) {
        color: $primary;
        background: var(--hover-bg);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      }

      svg-icon {
        font-size: 1.2em;
      }
    }
  }
}

.hot-lists {
  padding: $spacing-lg;

  .hot-tabs {
    display: flex;
    gap: $spacing-md;
    margin-bottom: $spacing-xl;
    padding: 0 $spacing-md;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    overflow-x: auto;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    .tab-btn {
      padding: $spacing-md $spacing-xl;
      border: none;
      background: none;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      gap: $spacing-sm;
      white-space: nowrap;
      position: relative;
      font-size: 1em;
      font-weight: 500;

      &::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 50%;
        width: 0;
        height: 3px;
        background: $primary;
        border-radius: 3px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      &.active {
        color: $primary;

        &::after {
          width: 100%;
          left: 0;
        }
      }

      &:hover:not(.active) {
        color: $primary;
      }

      i {
        font-size: 1.2em;
      }
    }
  }

  .hot-content {
    padding: 0 $spacing-md;

    .hot-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      gap: $spacing-lg;

      .hot-card {
        position: relative;
        border: 1px solid var(--border-color);
        border-radius: $border-radius-md;
        padding: $spacing-md;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        gap: $spacing-md;
        cursor: pointer;

        &:hover {
          transform: translateY(-3px);
          background: var(--hover-bg);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

          .title {
            color: $primary;
          }

          .rank {
            transform: scale(1.1);
          }
        }



        .rank {
          width: 36px;
          height: 36px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
          font-size: 1.1em;
          font-weight: 600;
          color: var(--text-primary);
          flex-shrink: 0;
          transition: all 0.3s ease;

          &.rank-1 {
            background: linear-gradient(135deg, #ff6b6b, #ee5253);
          }

          &.rank-2 {
            background: linear-gradient(135deg, #5c7cfa, #4263eb);
          }

          &.rank-3 {
            background: linear-gradient(135deg, #ffd43b, #fab005);
          }
        }

        .card-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: $spacing-sm;

          .title-wrap {
            display: flex;
            align-items: flex-start;
            gap: $spacing-sm;
          }

          .title {
            color: var(--text-primary);
            text-decoration: none;
            font-size: 1.1em;
            line-height: 1.5;
            font-weight: 500;
            display: -webkit-box;
            -webkit-line-clamp: 2;
          line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            transition: color 0.3s ease;
            flex: 1;

            &:hover {
              text-decoration: none;
              color: $primary;
            }
          }

          .hot-tag {
            padding: 3px 8px;
            border-radius: 6px;
            background: rgba($primary, 0.1);
            color: $primary;
            font-size: 0.85em;
            font-weight: 500;
            white-space: nowrap;
          }

          .card-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: auto;
            font-size: 0.9em;

            .hot-value {
              display: flex;
              align-items: center;
              gap: 6px;
              color: #ff6b6b;
              font-weight: 500;

              i {
                font-size: 1.1em;
              }
            }

            .trend {
              i {
                font-size: 1.1em;

                &.text-success {
                  color: #2ecc71;
                }

                &.text-danger {
                  color: #e74c3c;
                }

                &.text-warning {
                  color: #f1c40f;
                }
              }
            }
          }
        }
      }
    }
  }
}

@include responsive(sm) {
  .hot-search-container {
    padding: $spacing-sm;
  }

  .hot-search {

    .search-box,
    .hot-lists {
      padding: $spacing-md;
    }

    .hot-lists {
      .hot-content {
        .hot-grid {
          grid-template-columns: 1fr;
          gap: $spacing-md;
        }
      }
    }
  }
}

/* 热搜卡片悬停动画增强 */
.hot-card {
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        rgba(var(--primary-rgb), 0.05) 0%,
        rgba(var(--primary-rgb), 0) 50%,
        rgba(var(--primary-rgb), 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
    pointer-events: none;
  }

  &:hover::before {
    opacity: 1;
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: all 0.5s ease;
    z-index: 1;
    pointer-events: none;
  }

  &:hover::after {
    animation: hotCardShine 1.5s ease-in-out;
  }
}

@keyframes hotCardShine {
  0% {
    left: -100%;
  }

  100% {
    left: 150%;
  }
}

/* 站内搜索样式 */
.site-search-content {
  .search-type-tabs {
    display: flex;
    gap: $spacing-md;
    margin-bottom: $spacing-xl;
    padding: 0 $spacing-md;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    overflow-x: auto;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    .search-type-btn {
      padding: $spacing-md $spacing-lg;
      border: none;
      background: none;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      gap: $spacing-sm;
      white-space: nowrap;
      position: relative;
      font-size: 0.95em;
      font-weight: 500;
      border-radius: $border-radius-md;

      &::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 50%;
        width: 0;
        height: 3px;
        background: $primary;
        border-radius: 3px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      &.active {
        color: $primary;
        background: rgba($primary, 0.1);

        &::after {
          width: 100%;
          left: 0;
        }
      }

      &:hover:not(.active) {
        color: $primary;
        background: rgba($primary, 0.05);
      }

      i {
        font-size: 1.1em;
      }
    }
  }

  .search-results-container {
    padding: 0 $spacing-md;
  }

  .search-section {
    margin-bottom: $spacing-xl;

    .section-title {
      display: flex;
      align-items: center;
      gap: $spacing-sm;
      margin-bottom: $spacing-lg;
      color: var(--text-primary);
      font-size: 1.2em;
      font-weight: 600;
      padding-bottom: $spacing-sm;
      border-bottom: 2px solid rgba($primary, 0.2);

      i {
        color: $primary;
        font-size: 1.1em;
      }
    }

    .search-items {
      display: grid;
      gap: $spacing-md;
    }

    .search-item {
      padding: $spacing-lg;
      border: 1px solid var(--border-color);
      border-radius: $border-radius-md;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      background: var(--card-bg);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        border-color: $primary;
      }

      .item-title {
        margin: 0 0 $spacing-sm 0;
        color: var(--text-primary);
        font-size: 1.1em;
        font-weight: 600;
        line-height: 1.4;
      }

      .item-summary {
        margin: 0 0 $spacing-md 0;
        color: var(--text-secondary);
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .item-meta {
        display: flex;
        gap: $spacing-lg;
        font-size: 0.9em;
        color: var(--text-secondary);

        span {
          display: flex;
          align-items: center;
          gap: 4px;

          i {
            font-size: 0.9em;
          }
        }
      }

      &.user-item {
        display: flex;
        align-items: center;
        gap: $spacing-md;

        .user-avatar {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          object-fit: cover;
          border: 2px solid rgba($primary, 0.2);
        }

        .item-content {
          flex: 1;
        }
      }

      &.tag-item,
      &.category-item {
        padding: $spacing-md $spacing-lg;
        text-align: center;
        min-height: auto;

        .tag-name,
        .category-name {
          color: $primary;
          font-weight: 600;
          font-size: 1em;
        }
      }
    }
  }

  .single-type-results {
    text-align: center;
    padding: $spacing-xl;

    .search-info {
      color: var(--text-secondary);
      font-size: 1.1em;
      margin: 0;
    }
  }

  .no-results {
    text-align: center;
    padding: $spacing-xl * 2;
    color: var(--text-secondary);

    i {
      font-size: 3em;
      margin-bottom: $spacing-lg;
      opacity: 0.5;
    }

    p {
      margin: $spacing-sm 0;
      font-size: 1.1em;

      &.no-results-tip {
        font-size: 0.9em;
        opacity: 0.7;
      }
    }
  }

  .search-placeholder {
    text-align: center;
    padding: $spacing-xl * 3;
    color: var(--text-secondary);

    i {
      font-size: 4em;
      margin-bottom: $spacing-xl;
      opacity: 0.3;
      color: $primary;
    }

    p {
      margin: $spacing-md 0;
      font-size: 1.2em;

      &.search-tip {
        font-size: 1em;
        opacity: 0.7;
      }
    }
  }
}

/* 响应式适配 */
@include responsive(sm) {
  .site-search-content {
    .search-type-tabs {
      padding: 0 $spacing-sm;
      gap: $spacing-sm;

      .search-type-btn {
        padding: $spacing-sm $spacing-md;
        font-size: 0.9em;
      }
    }

    .search-results-container {
      padding: 0 $spacing-sm;
    }

    .search-section {
      .search-items {
        .search-item {
          padding: $spacing-md;

          &.user-item {
            .user-avatar {
              width: 40px;
              height: 40px;
            }
          }
        }
      }
    }

    .search-placeholder,
    .no-results {
      padding: $spacing-xl;

      i {
        font-size: 2.5em;
      }

      p {
        font-size: 1em;
      }
    }
  }
}

/* 单独类型搜索结果样式 */
.single-type-results {
  padding: 20px;

  .search-info-header {
    margin-bottom: 30px;
    text-align: center;

    .search-title {
      font-size: 24px;
      color: #333;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;

      i {
        color: #409eff;
      }
    }

    .search-info {
      font-size: 16px;
      color: #666;
      margin: 0;

      .keyword {
        color: #409eff;
        font-weight: bold;
      }

      .total {
        color: #e6a23c;
        font-weight: bold;
      }
    }
  }

  .result-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* 文章结果样式 */
  .article-item {
    display: flex;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }

    .article-cover {
      width: 200px;
      height: 120px;
      flex-shrink: 0;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .article-content {
      flex: 1;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .article-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin: 0 0 10px 0;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .article-summary {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        margin: 0 0 15px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .article-meta {
        display: flex;
        gap: 15px;
        font-size: 12px;
        color: #999;

        .meta-item {
          display: flex;
          align-items: center;
          gap: 4px;

          i {
            font-size: 12px;
          }
        }
      }
    }
  }

  /* 用户结果样式 */
  .user-item {
    display: flex;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }

    .user-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 15px;
      flex-shrink: 0;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .user-info {
      flex: 1;

      .user-nickname {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin: 0 0 5px 0;
      }

      .user-username {
        font-size: 14px;
        color: #409eff;
        margin: 0 0 10px 0;
      }

      .user-intro {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        margin: 0 0 10px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .user-meta {
        font-size: 12px;
        color: #999;
      }
    }
  }

  /* 标签和分类结果样式 */
  .tag-item,
  .category-item {
    display: flex;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }

    .tag-icon,
    .category-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: linear-gradient(135deg, #409eff, #67c23a);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      flex-shrink: 0;

      i {
        color: #fff;
        font-size: 20px;
      }
    }

    .tag-info,
    .category-info {
      flex: 1;

      .tag-name,
      .category-name {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin: 0 0 5px 0;
      }

      .tag-description,
      .category-description {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        margin: 0 0 10px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .tag-meta,
      .category-meta {
        font-size: 12px;
        color: #999;
      }
    }
  }

  /* 说说结果样式 */
  .moment-item {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }

    .moment-content {
      .moment-text {
        font-size: 16px;
        color: #333;
        line-height: 1.6;
        margin: 0 0 15px 0;
      }

      .moment-images {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
        margin-bottom: 15px;

        img {
          width: 100%;
          height: 100px;
          object-fit: cover;
          border-radius: 8px;
        }
      }

      .moment-meta {
        display: flex;
        gap: 15px;
        font-size: 12px;
        color: #999;

        .meta-item {
          display: flex;
          align-items: center;
          gap: 4px;

          i {
            font-size: 12px;
          }
        }
      }
    }
  }

  /* 无结果样式 */
  .no-results {
    text-align: center;
    padding: 60px 20px;
    color: #999;

    i {
      font-size: 48px;
      margin-bottom: 20px;
      opacity: 0.5;
    }

    p {
      font-size: 16px;
      margin: 0;
    }
  }

  /* 分页样式 */
  .pagination-wrapper {
    margin-top: 40px;
    display: flex;
    justify-content: center;
  }
}

/* 响应式适配 */
@media (max-width: 768px) {
  .single-type-results {
    padding: 15px;

    .article-item {
      flex-direction: column;

      .article-cover {
        width: 100%;
        height: 200px;
      }

      .article-content {
        padding: 15px;
      }
    }

    .user-item {
      padding: 15px;

      .user-avatar {
        width: 50px;
        height: 50px;
      }
    }

    .tag-item,
    .category-item {
      padding: 15px;

      .tag-icon,
      .category-icon {
        width: 40px;
        height: 40px;

        i {
          font-size: 16px;
        }
      }
    }

    .moment-item {
      padding: 15px;

      .moment-images {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));

        img {
          height: 80px;
        }
      }
    }
  }
}
</style>